<template>
    <div>
        <flexbox align="flex-start">
            <flexbox class="cell-item" v-for="item of fieldList.slice(0, showFieldMaxNum - 1)" :key="item.field">
                <a-select allowClear :style="{ minWidth: item.width || '120px' }" :placeholder="item.placeholder" v-model:value="form[item.field]" v-if="item.formType === 'select'">
                    <a-select-option :key="elem.code" v-for="elem of item.setting">
                        {{ elem.dimensionName || elem.system }}
                    </a-select-option>
                </a-select>
                <h-dic-select :type="item.type || item.field" :title="item.title" :defaultOptions="item.defaultOptions || []" v-model:value="form[item.field]" v-if="item.formType === 'dicSelect'" />
                <a-input class="cell-item" allowClear :placeholder="item.placeholder" v-model:value="form[item.field]" v-if="item.formType === 'input'" />
                <flexbox v-if="item.formType === 'date'">
                    <div style="width: 70px; font-size: 13px; margin-right: 8px" v-fitText>{{ item.title }}：</div>
                    <h-range-picker-cell :value="[form[item.startTimeField] ? $moment(form[item.startTimeField], 'YYYY-MM-DD') : null, form[item.endTimeField] ? $moment(form[item.endTimeField], 'YYYY-MM-DD') : null]" @change="rangeDateChange($event, item.field)" />
                </flexbox>
            </flexbox>
            <a-button type="primary" @click="handleSearch">搜索</a-button>
            <a-button class="margin-l-8" @click="handleReset">重置</a-button>
        </flexbox>
    </div>
</template>

<script lang="ts">
import { HRangePickerCell, HCustomSelect, HDicSelect, HShowMoreSelect, HGroupSelect } from '@/components';
import store from '@/store';
import { defineComponent, ref, unref, watch } from 'vue';
export default defineComponent({
    components: {
        HRangePickerCell,
        HCustomSelect,
        HDicSelect,
        HShowMoreSelect,
        HGroupSelect
    },
    emits: ['search'],
    setup(_, { emit }) {
        const form: any = ref({
            businessCreateTimeStart: null,
            businessCreateTimeEnd: null,
            versionOnlineRealTimeStart: null,
            versionOnlineRealTimeEnd: null,
            status: null
        });
        const fieldList = ref<any>([
            { field: 'status', title: '状态', formType: 'dicSelect', defaultOptions: store.getters.dicOptions.status.slice(0, 3) },
            { field: 'businessCreateTime', startTimeField: 'businessCreateTimeStart', endTimeField: 'businessCreateTimeEnd', title: '提出时间', formType: 'date' },
            { field: 'versionOnlineRealTime', startTimeField: 'versionOnlineRealTimeStart', endTimeField: 'versionOnlineRealTimeEnd', title: '上线时间', formType: 'date' }
        ]);
        const showFieldMaxNum = ref<number>(5);
        // 重置搜索条件
        const handleReset = () => {
            form.value = {
                businessCreateTimeStart: null,
                businessCreateTimeEnd: null,
                versionOnlineTimeStart: null,
                versionOnlineTimeEnd: null,
                status: null
            };
        };
        const handleSearch = () => {
            emit('search', {
                ...unref(form)
            });
        };
        const rangeDateChange = (val, field) => {
            const { startTime, endTime } = val;
            form.value[`${field}Start`] = startTime;
            form.value[`${field}End`] = endTime;
        };
        watch(
            form,
            () => {
                handleSearch();
            },
            { deep: true }
        );
        return {
            form,
            fieldList,
            showFieldMaxNum,
            handleSearch,
            handleReset,
            rangeDateChange
        };
    }
});
</script>
<style scoped lang="less">
.cell-item {
    font-size: 14px;
    cursor: pointer;
    color: #344563;
    margin-right: 8px;
}
</style>